<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <!-- element.css -->
    <link rel="stylesheet" href="/static/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/vue/vue-2.7.10.js"></script>
    <!-- element.js -->
    <script src="/static/element-ui/element-ui.js"></script>
    <!-- echarts -->
    <script type="text/javascript" src="/static/echarts/echarts-5.3.3.js"></script>

</head>
<style>
    *{
        margin: 0;
        padding: 5px;
        box-sizing: border-box;
    }
    #app{
        padding: 0 10px; /* 给gutter留padding */
    }
    .el-row {
        height: 100%;
    }
    .el-col {
    }
    .el-row :last-child {
        margin-bottom: 0;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .title{
        text-align: center;
    }
    .title span{
        color: darkred;
        font-size: 20px;
    }
</style>
<body>
<div id="app">
    <div class="title">
        <span>XX年湖北省社保基金收支总览</span>
    </div>
    <el-row :gutter="20" style="height: 100%;">
        <el-col :sm="24" :md="6">
            <div style="height: 300px">
                <el-table
                        :data="tableData"
                        :span-method="arraySpanMethod"
                        style="width: 100%;">
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                    <el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div style="width: 100%;height: calc(100vh - 300px);">
                <div ref="jbbf" style="width: 100%;height: 100%;">

                </div>
            </div>

        </el-col>
        <el-col :sm="24" :md="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :sm="24" :md="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }]
            }
        },
        created() {
        },
        mounted() {
            this.getEchartsData()
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 2) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            getEchartsData() {
                const chart = this.$refs.jbbf
                console.log(chart)
                if (!!chart) {
                    const myChart = echarts.init(chart)
                    const option = { legend: {},
                        tooltip: {},
                        dataset: {
                            source: [
                                ['订单', 43.3, 85.8],
                                ['订单1', 83.1, 73.4],
                                ['订单2', 86.4, 65.2],
                                ['订单3', 72.4, 53.9],
                                ['订单4', 82.4, 53.9],
                                ['订单5', 42.4, 53.9],
                                ['订单6', 72.4, 53.9],
                                ['订单7', 72.4, 53.9]
                            ]
                        },
                        xAxis: { type: 'category' },
                        yAxis: {},
                        series: [ { type: 'bar' }, { type: 'bar' }]}
                    myChart.setOption(option)
                    window.addEventListener("resize", ()=> {
                        console.log('resize')
                        myChart.resize()
                    })
                }
                this.$on('hook:destroyed',()=>{
                    window.removeEventListener("resize", ()=> {
                        myChart.resize();
                    });
                })
            },
        },
        watch: {},
    })
</script>


</body>
</html>
